<template>
  <div>
    <span class="dynamic-title1">
      最新消息
      <i class="el-alert__icon el-icon-s-comment" />
    </span>
    <div class="msg-box">
      <li v-for="(item, index) in conferMsg" :key="index" class="msg_list_ul_li">
        <span class="msg_info_box">
          <span class="msg_type">{{ item.type }}</span>
          <router-link
            class="msg_title"
            :to="{path: '/Organization/conference-details', query: {id: item.id}}"
          >
            <span style="margin-left: 10px;">{{ item.msg }}</span>
          </router-link>
          <em
            class="data-time"
            style="position:absolute; float: right; color:rgb(121, 121, 255);  padding-right:1px;"
          >{{ item.time }}</em>
        </span>
      </li>
    </div>
  </div>
</template>
<script>
import { companyConferList } from '@/api/zzxt/party-conference/confer'
import { companyDetail } from '@/api/company.js'
export default {
  name: 'UserStatistics',
  data: () => ({
    conferMsg: []
  }),
  computed: {
    currentCompany() {
      return this.$store.state.user.globalCompany
    },
    conferTypesDict() {
      return this.$store.state.party.conferTypesDict
    }
  },
  watch: {
    currentCompany: {
      handler(val) {
        if (!val || this.inited) return
        this.inited = true
        this.getMsgContent()
      },
      immediate: true
    }
  },
  methods: {
    getMsgContent() {
      this.loading = true
      // 获取最新的提交内容
      const page = { pageIndex: 0, pageSize: 50 }
      companyConferList({
        page: page,
        partyConferenceType: 511,
        company: this.currentCompany.slice(0, 2)
      }).then(data => {
        if (data.list.length > 0) {
          data.list.forEach(item => {
            const conferMsg = []
            companyDetail(item.createByCode).then(data => {
              conferMsg.push(data.model.name)
              const type = this.conferTypesDict[item.type]
              const typeName = (type && type.alias) || '未知类型'
              conferMsg.push(`提交了${typeName}`)
              conferMsg.push(`记录《${item.title}》`)
              this.conferMsg.push({
                type: typeName,
                id: item.id,
                msg: conferMsg.join(''),
                time: item.startTime.slice(0, 10)
              })
            })
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../style';
.msg_list_ul_li {
  position: relative;
  padding: 6px 0;
  border-bottom: 1px solid #e0e0e0;
}
.msg-box {
  display: block;
  height: 21rem;
  width: 100%;
  right: 2rem;
  overflow-y: auto;
  overflow-x: hidden;
}
.msg_type {
  display: inline-block;
  height: 16px;
  line-height: 16px;
  padding: 0 0px;
  color: #4d4d4d;
  font-size: 12px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  vertical-align: center;
}
.msg_info_box {
  height: 80%;
  color: #4d4d4d;
  margin-right: 0.3rem;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.msg_title {
  margin-left: 10px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
@media screen and (max-width: 1440px) {
  .msg_title {
    width: 15rem;
  }
}

/* 屏幕等于1440px */
@media screen and (max-width: 1919px) and (min-width: 1440px) {
  .msg_title {
    width: 15rem;
  }
}

/* 屏幕大于1440px */
@media screen and (min-width: 1920px) {
  .msg_title {
    width: 22rem;
  }
}
.data-time {
  right: 0;
}
</style>
